﻿<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>

<fmt:setBundle basename="ApplicationMessage" />


<!DOCTYPE html>
<html lang="zh-CN">
<head>

<%@ include file="/WEB-INF/include/meta.jsp"%>
<%@ include file="/WEB-INF/include/css.jsp"%>

</head>

<body class="ihg-theme-draft">

  <%@ include file="/WEB-INF/include/header.jsp"%>
  <%@ include file="/WEB-INF/include/submenu.jsp"%>

  <div class="container-fluid ihg-container has-ihg-sidemenu">

    <div class="ihg-breadcrumb">
      <ol class="breadcrumb border-breadcrumb">
        <li class="active">Final Recommend</li>
      </ol>
    </div>

    <div class="ihg-content-layout" style="margin-top: 60px;">
      <div class="row">
        <div class="col-xs-9">
          <table class="table table-bordered ihg-table tab-pane table-text-center" style="margin-top: 15px;">
            <thead>
              <tr>
                <th style="width: 160px; background: #f2f3ed;">Quality Practice Name</th>
                <th style="width: 130px;">Name</th>
                <th>COMMENTS</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td rowspan="3" style="background: #f2f3ed;">Quality Practice A</td>
                <td>name a</td>
                <td class="comments-wrap" data-comment="1|a">
                  <a href="javascript: void(0);" class="btn btn-default select-comment" >comments</a>
                </td>
              </tr>
              <tr>
                <td>name b</td>
                <td class="comments-wrap" data-comment="2|a">
                  A long evaluation
                </td>
              </tr>
              <tr>
                <td>name c</td>
                <td class="comments-wrap" data-comment="3|a">
                  <a href="javascript: void(0);" class="btn btn-default select-comment" >comments</a>
                </td>
              </tr>
              <tr>
                <td rowspan="3" style="background: #f2f3ed;">Quality Practice B</td>
                <td>name a</td>
                <td class="comments-wrap" data-comment="1|b">
                  <a href="javascript: void(0);" class="btn btn-default select-comment" >comments</a>
                </td>
              </tr>
              <tr>
                <td>name b</td>
                <td class="comments-wrap" data-comment="2|b">
                  <a href="javascript: void(0);" class="btn btn-default select-comment" >comments</a>
                </td>
              </tr>
              <tr>
                <td>name c</td>
                <td class="comments-wrap" data-comment="3|b">
                  <a href="javascript: void(0);" class="btn btn-default select-comment" >comments</a>
                </td>
              </tr>
              <tr>
                <td rowspan="3" style="background: #f2f3ed;">Quality Practice B</td>
                <td>name a</td>
                <td class="comments-wrap" data-comment="1|c">
                  <a href="javascript: void(0);" class="btn btn-default select-comment" >comments</a>
                </td>
              </tr>
              <tr>
                <td>name b</td>
                <td class="comments-wrap" data-comment="2|c">
                  <a href="javascript: void(0);" class="btn btn-default select-comment" >comments</a>
                </td>
              </tr>
              <tr>
                <td>name c</td>
                <td class="comments-wrap" data-comment="3|c">
                  <a href="javascript: void(0);" class="btn btn-default select-comment" >comments</a>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="col-xs-3">
        <div class="evaluation-layout">
          <div class="text-right" style="color: #D45F16; font-weight: bold; line-height: 35px;">COMMENTS OPTIONS</div>
          <div class="comments-layout">
            <div class="main" style="display: none;">
              <div class="comments-item">
                A long evaluation description description description description
              </div>
              <div class="comments-item">
                A long evaluation description
              </div>
              <div class="comments-item">
                A long evaluation
              </div>
              <div class="comments-item">
                A long comments
              </div>
              <div class="comments-item">
                A long description
              </div>
            </div>
          </div>
        </div>
        </div>
      </div>
      <div class="ihg-operation-group pull-right">
        <a href="" class="btn btn-success btn-shadow btn-shadow-success">Next Step</a>
      </div>
    </div>

  </div>

  <%@ include file="/WEB-INF/include/footer.jsp"%>
  <%@ include file="/WEB-INF/include/script.jsp"%>

  <d:resource root="${ctx.resource}/build" type="script" src="js/page/session/during/calibration/calibration-comment.js" />
  <script type="text/javascript">
    require([ 'page/session/during/calibration/calibration-comment' ], function(page) {
      page.init();
    })
  </script>
</body>

</html>
